<!DOCTYPE html>
<html>

<head>
    <#include "/pxlm/admin/components/meta.html" />
    <title>蓁奕科技 ${metaTitleSuffix!}</title>
    <#include "/pxlm/admin/components/stylesheets.html" />
    <style>
        .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
    .el-tag+.el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .field-options {
        margin-top: 10px;
        padding: 5px 10px;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
    }
    </style>
</head>

<body>
    <div id='app'>
        <el-container>
            <#assign menuIndex="1-1" />
            <#include "/pxlm/admin/components/menu.html" />
            <el-container>
                <#include "/pxlm/admin/components/header.html" />
                <el-main>
                    <template>
                        <el-form ref="form" :model="form" label-width="120px">
                            <el-row>
                                <el-form-item label="学校">
                                    <el-select v-model="form.schoolId" placeholder="请选择">
                                        <el-option v-for="item in schools" :key="item.id" :label="item.name" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="课程类别">
                                    <el-select v-model="form.categoryId" placeholder="请选择">
                                        <el-option v-for="item in categories" :key="item.id" :label="item.title" :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="标题">
                                    <el-input v-model="form.title"></el-input>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="副标题">
                                    <el-input v-model="form.subtitle" type='text'></el-input>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="封面">
                                    <el-upload class="avatar-uploader" :on-success="handleAvatarSuccess" :on-error="handleAvatarError" :http-request='uploadQnFile' list-type='picture' :show-file-list="false">
                                        <img v-if="form.image" :src="form.image" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="内容">
                                    <el-input v-model="form.cotnent" type="textarea" :rows="5"></el-input>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="备注">
                                    <el-input v-model="form.remark" type="textarea" :rows="5"></el-input>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="优先级">
                                    <el-input v-model="form.sort" type='number'></el-input>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="隐藏">
                                    <el-checkbox v-model="form.isHidden" :false-label='0' :true-label='1' :checked='form.isHidden == 1' border>隐藏</el-checkbox>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="规格">
                                    <el-button size="mini" @click="showFormatDialog()">添加规格</el-button>
                                    <el-table :data="formats" style="width: 100%;">
                                        <el-table-column prop="title" label="规格">
                                        </el-table-column>
                                        <el-table-column prop="price" label="价格">
                                        </el-table-column>
                                        <el-table-column label="操作">
                                            <template slot-scope="scope">
                                                <el-button type="text" @click="showFormatDialog(scope.row)">编辑</el-button>
                                                <el-button type="text" @click="delFormat(scope.row)">删除</el-button>
                                                <el-button type="text" @click="moveFormatUp(scope.row)">上移</el-button>
                                                <el-button type="text" @click="moveFormatDown(scope.row)">下移</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item>
                                    <el-button type="primary" @click="onSubmit">保存</el-button>
                                </el-form-item>
                            </el-row>
                        </el-form>
                        <el-dialog title="添加/编辑规格" :visible.sync="formatDialogVisible">
                            <el-form :model="formatToAdd">
                                <el-form-item label="规格" label-width="80px">
                                    <el-input v-model="formatToAdd.title"></el-input>
                                </el-form-item>
                                <el-form-item label="价格" label-width="80px">
                                    <el-input v-model="formatToAdd.price" type="number"></el-input>
                                </el-form-item>
                                <el-form-item label="图片" label-width="80px">
                                    <el-upload class="avatar-uploader" :on-success="handleFormatImgSuccess" :on-error="handleFormatImgError" :http-request='uploadQnFile' list-type='picture' :show-file-list="false">
                                        <img v-if="formatToAdd.image" :src="formatToAdd.image" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="formatDialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="submitFormat">确 定</el-button>
                            </div>
                        </el-dialog>
                    </template>
                </el-main>
            </el-container>
        </el-container>
        <#include "/pxlm/admin/components/footer.html" />
    </div>
    <#include "/pxlm/admin/components/scripts.html" />
    <#include "/components/qiniu.html" />
    <script type="text/javascript">
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                form: {
                },
                categories: toJson(`${categories!}`),
                schools: [{ id: 4, name: '品学联萌总部'}],
                formatDialogVisible: false,
                isEditFormat: false,
                formats: [],
                formatToAdd: {
                    title: '',
                    price: '',
                    image: ''
                }
            }
        },
        mounted: function() {
            if ('${data!}') {
                this.form = toJson(`${data!'{}'}`);
            }
            if (this.form.formats) {
                // this.formats = JSON.parse(this.form.formats);
                this.formats = this.form.formats;
            }
        },
        methods: {
            onSubmit() {
                if (!this.formats || this.formats.length == 0) {
                    msg("请添加规格");
                    return;
                }
                var formats = JSON.stringify(this.formats);
                var param = {
                    productId: this.form.id,
                    schoolId: this.form.schoolId,
                    categoryId: this.form.categoryId,
                    title: this.form.title,
                    subtitle: this.form.subtitle,
                    // html: this.form.html,
                    cotnent: this.form.cotnent,
                    image: this.form.image,
                    remark: this.form.remark,
                    isHidden: this.form.isHidden,
                    sort: this.form.sort,
                    formats: formats
                }
                // console.log(param)
                var url = ''
                var ref = '${referer!""}'
                var url = '/pxlm/admin/product/submit'
                axiosRequest(param, url, ref)
            },
            showFormatDialog(item) {
                this.formatDialogVisible = true;
                if (item) {
                    this.formatToAdd = item;
                    this.isEditFormat = true;
                } else {
                    this.formatToAdd = {
                        title: '',
                        price: '',
                        image: ''
                    };
                    this.isEditFormat = false;
                }
            },
            submitFormat() {
                if (!this.formatToAdd.title) {
                    msg("请输入规格");
                    return;
                }
                if (!this.formatToAdd.price) {
                    msg("请输入价格");
                    return;
                }
                for (var i = 0; i < this.formats.length; i ++) {
                    if (this.formats[i].title == this.formatToAdd.title && !this.isEditFormat) {
                        msg("规格不能重复");
                        return;
                    }
                }
                if (!this.isEditFormat) {
                    this.formats.push(this.formatToAdd);
                }
                this.formatDialogVisible = false;
            },
            delFormat(item) {
                this.formats.splice(this.formats.indexOf(item), 1);
            },
            moveFormatUp(item) {
                var index = this.formats.indexOf(item);
                if (index == 0) {
                    return;
                }
                var itemsToExchange = this.formats.splice(index - 1, 2);
                this.formats.splice(index - 1, 0, itemsToExchange[1], itemsToExchange[0]);
            },
            moveFormatDown(item) {
                var index = this.formats.indexOf(item);
                if (index == this.formats.length - 1) {
                    return;
                }
                var itemsToExchange = this.formats.splice(index, 2);
                this.formats.splice(index, 0, itemsToExchange[1], itemsToExchange[0]);
            },
            req(file) {
                onUploadSMImage(file)
            },
            handleAvatarSuccess(res, file) {
                console.log(res)
                console.log(file)
                this.form.image = res.data.url
                console.log(this.form.image);
                // this.form.image = URL.createObjectURL(file.raw);
            },
            handleAvatarError(err, file, fileList) {
                console.log(err);
            },
            handleFormatImgSuccess(res, file) {
                console.log(res)
                console.log(file)
                this.formatToAdd.image = res.data.url
                console.log(this.formatToAdd.image);
                // this.form.image = URL.createObjectURL(file.raw);
            },
            handleFormatImgError(err, file, fileList) {
                console.log(err);
            }
        }
    })
    </script>
    <script>
    // vue.tableData = ${items!};
    </script>
</body>

</html>